---
title: 'Custom plugins'
description: 'Write your own plugins to extend the functionality of the calendar.'
---

# Write your own plugin

A plugin can be any object that has a `name` property, and an `beforeRender` method. The `$app` object, the "control center"
object of the calendar, is then received as the first argument of the `beforeRender` method. This gives you access to most
of the calendar's global, internal APIs.

If you're writing TypeScript, the type of this object is
`CalendarAppSingleton`. If you're writing JavaScript, just leave out the type annotation, but then take a moment to
study the following interface and its nested interfaces to get an idea of what's available to you: https://github.com/schedule-x/schedule-x/blob/main/packages/shared/src/interfaces/calendar/calendar-app-singleton.ts

## A simple example

```ts
import { CalendarAppSingleton } from '@schedule-x/shared'
import { createCalendar } from '@schedule-x/calendar'

class LoggerPlugin {
  name = 'logger-plugin'

  beforeRender($app: CalendarAppSingleton) {
    $app.calendarEvents.list.value.forEach((event) => {
      console.log('init', event)
    })
  }

  onRender($app: CalendarAppSingleton) {
    console.log('do something else')
  }
}

const calendar = createCalendar(
  { /* config */ },
  [new LoggerPlugin()]
)
```
